<template>
  <div class="playing">
    <div class="shade" v-show="showSongList" @click="showSongList = false"></div>
    <div class="songList" id="songList" :style="showSongList?'bottom: 60px;':'bottom: -540px;'">
      <div style="" class="songListTop">播放列表({{playList.length}})</div>
      <el-table :row-style="setRow" :cell-style="setTd" :data="playList" max-height="500" style="max-width: 1000px" :show-header="false">
        <el-table-column prop="pic" label="专辑图" width="200">
          <template slot-scope="scope">
            <div class="picImage" :style="'background-image: url('+scope.row.pic+');'">
            </div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="title" label="歌曲名" width="230"></el-table-column>
        <el-table-column show-overflow-tooltip prop="author" label="作者" width="230"></el-table-column>
        <el-table-column show-overflow-tooltip prop="special" label="专辑" width="260"></el-table-column>
        <el-table-column label="播放" width="80">
          <template slot-scope="scope">
            <i class="iconfont" :class="scope.row.isPlaying?'big-icon-test1':'big-icon-test2'" style="font-size: 26px;" @click="jumpPlayList(scope.$index)"></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="">
      <audio :src="playUrl" id="audio" autoplay></audio>
      <div class="palyLeft" >
        <i @click="nextSong(false)" class="iconfont big-icon-test red"></i>
        <i @click="play()" class="iconfont" style="color: #E83C3C;" :class="inPlayData.isPlaying?'big-icon-test1':'big-icon-test2'"></i>
        <i @click="nextSong()" class="iconfont big-icon-test6 red" ></i>
        <!--<i class="iconfont big-icon-test14 red" style="font-size: 33px;"></i>-->
      </div>
      <div class="palyRight" v-show="inPlayList.length>0">
        <img :src="inPlayData.pic" class="specImg" >
        <span style="position: relative;color:white;top: -18px;font-size: 16px;margin-left: 8px;">{{inPlayData.title}}</span>
        <span style="position: relative;color:white;top: -18px;font-size: 14px;color: #999999">{{inPlayData.author}}</span>
        <div style="width:75%;display: inline-block;position: absolute;top: 24px;left: 192px;" v-if="inPlayData!=''">
          <el-slider style="width: 90%;display: inline-block;" @change="changePlan" :format-tooltip="formatTooltip" :show-tooltip="!no" v-model="planLength" :max="inPlayData.Second || '100'" :disabled="inPlayData==''"></el-slider>
          <span style="width:9%;float:right;color: white;font-size: 14px;display: inline-block;height: 38px;line-height: 38px;">
            <span>{{formatTooltip(planLength)}}</span><span style="color: #999999;"> / {{inPlayData.time?inPlayData.time:'- - -'}}</span>
          </span>
        </div>
        <div class="playBtn" v-if="playList.length>0">
          <!--<i class="iconfont big-icon-test13" style="color:white;font-size: 24px;"></i>-->
          <span class="playList iconfont big-icon-test13" style="color:white;font-size: 24px;" @click="openSongList"><span style="font-size: 14px;">{{playList.length}}</span></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Storage from '../../util/StorageUtil.js'
export default {
  name: 'Playing',
  data () {
    return {
      audio: '',
      planLength: 0,
      Interval: '',
      no: false,
      playUrl: '',
      inPlayList: Storage.get('playList') || [],
      inPlayData: Storage.get('PlayingData') || [],
      showSongList: false,
      playList: [],
      setTd: {
        padding: `5px 0`
      },
      di: ''
    }
  },
  props: {
    List: {
      type: [Object],
      default: null
    },
    playFun: {
      type: [Function],
      default: null
    },
    playingList: {
      type: [Array],
      default: null
    }
  },
  mounted () {
    if (this.inPlayList.length > 0) {
      this.inPlayList = JSON.parse(this.inPlayList)
    }
    if (this.inPlayData.length > 0) {
      this.inPlayData = JSON.parse(this.inPlayData)
    }
    this.audio = document.querySelector('#audio')
    this.inPlayData.isPlaying = false
    this.playList = this.inPlayList
    let that = this
    this.audio.addEventListener(`error`, function err () {
      // that.planLength = 0
      // that.inPlayData.isPlaying = true
      // that.inPlayData.time = that.common.formatSeconds(that.audio.duration)
      // that.inPlayData.Second = parseInt(that.audio.duration)
      // Storage.set('PlayingData', JSON.stringify(that.inPlayData))
      that.nextSong(that.di, false)
      if (that.di === '') {
        return
      }
      console.log(`播放错误`)
      that.$message({
        type: 'error',
        message: `播放错误!`
      })
    })
    this.audio.addEventListener(`canplay`, function (e) {
      // console.log(`22222222222222222222222222222222222`)
      if (that.audio.currentTime < 1) that.planLength = 0
      that.inPlayData.isPlaying = true
      that.inPlayData.time = that.common.formatSeconds(that.audio.duration)
      that.inPlayData.Second = parseInt(that.audio.duration)
      Storage.set('PlayingData', JSON.stringify(that.inPlayData))
      // that.Interval = setInterval(function () { that.myTimer() }, 1000)
    })
  },
  methods: {
    setRow (row) {
      // console.log(row.row.isPlaying)
      if (row.row.songId == this.inPlayData.songId) { //eslint-disable-line
        return `background-color:#f5f6f9 !important;`
      }
    },
    openSongList () {
      // console.log(this.playingList)
      this.showSongList = !this.showSongList
      if (this.showSongList) {
        setTimeout(this.setScrollTop(), 2000)
      }
    },
    lookMv (id) {
      window.location.href = `https://music.163.com/#/mv?id=${id}`
    },
    formatTooltip (value) {
      // console.log(value)
      return this.common.formatSeconds(value)
    },
    setInPlayListPlaySt (index) {
      for (let i = 0; i < this.playList.length; i++) {
        this.playList[i].isPlaying = false
      }
      if (index) this.playList[index].isPlaying = true
    },
    getInPlayDataIndex () {
      for (let i = 0; i < this.playList.length; i++) {
        if (this.playList[i].songId == this.inPlayData.songId) { //eslint-disable-line
          return i
        }
      }
    },
    jumpPlayList (index) {
      // clearInterval(this.Interval)
      // let thisIndex = this.getInPlayDataIndex()
      this.playUrl = ''
      this.inPlayData.isPlaying = false
      this.inPlayData = this.inPlayList[index]
      this.playUrl = this.inPlayList[index].playUrl
      this.inPlayList[index].isPlaying = true
    },
    nextSong (di = true) {
      this.di = di
      if (di === '') {
        return
      }
      clearInterval(this.Interval)
      let index = this.getInPlayDataIndex()
      this.playUrl = ''
      console.log(index)
      // this.playFun(this.List.index)
      if (di) {
        index = index + 1
        if (index >= this.inPlayList.length) {
          index = 0
        }
      } else {
        index = index - 1
        if (index < 0) {
          index = this.inPlayList.length - 1
        }
      }
      this.inPlayData.isPlaying = false
      this.inPlayData = this.inPlayList[index]
      this.playUrl = this.inPlayList[index].playUrl
      // console.log(this.inPlayList[index].playUrl)
    },
    getMySongList (id) {
      // const url = `https://api.imjad.cn/cloudmusic/?type=playlist&id=${id}`
      let that = this
      const url = `https://api.bzqll.com/music/netease/songList?key=579621905&id=${id}`
      this.$get(url, {}).then(response => {
        // console.log(response)
        let data = response.data.songs
        // console.log(data)
        let songList = []
        for (let i = 0; i < data.length; i++) {
          songList.push({
            pic: data[i].pic,
            author: data[i].singer,
            title: data[i].name,
            special: `《----》`,
            songId: data[i].id || data[i].Id,
            playUrl: `http://music.163.com/song/media/outer/url?id=${data[i].id || data[i].Id}.mp3`,
            showImg: false,
            isPlaying: false
          })
        }
        that.inPlayList = songList
        that.playList = songList
        that.inPlayData = songList[0]
        that.inPlayData.isPlaying = !that.inPlayData.isPlaying
        Storage.set('playList', JSON.stringify(that.inPlayList))
        Storage.set('PlayingData', JSON.stringify(that.inPlayData))
        // for (let i = 0; i < this.songList.length; i++) {
        //   setTimeout(this.getSongAl(this.songList[i].songId, i), 300)
        // }
      }).catch(() => {
        // 失败了, 更新数据(失败)
      }).finally(() => {
      })
    },
    play () {
      if (!this.inPlayData.pic) {
        this.getMySongList(639714476)
        return
      }
      let index = this.getInPlayDataIndex()
      if (this.$parent) {
        if (this.$parent.showPlayTable) {
          this.playFun(index)
        } else {
          this.inPlayData.isPlaying = !this.inPlayData.isPlaying
          this.playList[index].isPlaying = this.inPlayData.isPlaying
        }
      }
    },
    setScrollTop () {
      let index = this.getInPlayDataIndex()
      let songList = document.querySelector('#songList')
      // songList.scrollTop = 100
      songList.getElementsByClassName('el-table__body-wrapper')[0].scrollTop = 48 * index
    },
    myTimer () {
      // console.log(this.planLength)
      if (this.planLength === this.inPlayData.Second) {
        clearInterval(this.Interval)
        this.nextSong()
        // this.play()
        return
      }
      this.planLength++
    },
    changePlan () {
      // this.$parent.jump(this.planLength)
      this.audio.currentTime = this.planLength
    },
    getSpecial (id, index) {
      const url = `https://api.imjad.cn/cloudmusic/?type=detail&id=${id}`
      this.$get(url, {}, false).then(response => {
        // 成功了, 更新数据(成功)
        var data = response.songs[0].al.name
        // console.log(data)
        this.inPlayList[index].special = `《${data}》`
        // this.songList[index].time = this.common.formatSeconds(response.songs[0].dt)
      })
    }
  },
  watch: {
    inPlayList: {
      handler (value) {
        console.log('列表改变')
        for (let i = 0; i < value.length; i++) {
          if (value[i].special === `《----》`) {
            this.getSpecial(value[i].songId, i)
          }
        }
        Storage.set('playList', JSON.stringify(value))
      }
    },
    'inPlayData.isPlaying': function (value) {
      let index = this.getInPlayDataIndex()
      console.log(value ? `播放  ${index}` : `暂停  ${index}`)
      let that = this
      // this.inPlayList[index].isPlaying = value
      // setTimeout(function () {
      //   if (value) that.setInPlayListPlaySt(index)
      // }, 200)
      if (value) {
        that.di = ' '
        // this.setInPlayListPlaySt(index)
        // this.setInPlayListPlaySt()
        if (!that.audio.currentSrc) {
          let index = this.getInPlayDataIndex()
          this.playUrl = this.inPlayList[index].playUrl
          clearInterval(that.Interval)
          that.Interval = setInterval(function () { that.myTimer() }, 1000)
        } else {
          that.audio.play()
          clearInterval(that.Interval)
          that.Interval = setInterval(function () { that.myTimer() }, 1000)
        }
      } else {
        this.setInPlayListPlaySt()
        // this.inPlayList[index].isPlaying = false
        clearInterval(that.Interval)
        that.audio.pause()
      }
    }
  }
}
</script>

<style scoped>
  .playing{
    position: fixed;
    height: 60px;
    z-index: 1000;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
    font-size: 21px;
    font-weight: 400;
    transition: all 180ms ease-in-out;
  }
  .playing:hover{
    bottom: 0;
  }
  .red{
    color: #E83C3C;
  }
  .palyLeft i{
    color: #c13b3b;
    font-size: 36px;
    font-weight: 900;
  }
  .palyLeft i:hover{
    cursor:pointer;
    color: #E83C3C;
  }
  .specImg{
    width: 36px;
    height: 36px;
    border: #E83C3C 2px solid;
    vertical-align: bottom;
  }
  .palyRight{
    background-color: rgb(53, 52, 52);
    /* display: none; */
    height: 40px;
    width: auto;
    padding: 10px 10px 10px 140px;
  }
  .palyLeft{
    background-color: rgb(53, 52, 52);
    padding: 10px;
    display: inline-block;
    width: 120px;
    position: absolute;
  }
  .palyRight .playBtn{
    display: inline-block;
    float: right;
    height: 40px;
    line-height: 40px;
  }
  .playList{
    padding: 3px;
    cursor: pointer;
    border-radius: 20px;
  }
  .playList:hover{
    background-color: black;
  }
  .shade{
    position: fixed;
    bottom: 60px;
    top: 0;
    left: 0;
    right: 0;
    z-index: -2;
    background-color: black;
    opacity: 0.1;
  }
  .songList{
    /*background-color: red;*/
    /*border-left: 1px #313131 solid;*/
    position: absolute;
    right: 0;
    z-index: -1;
    transition: bottom 300ms ease-in-out;
  }
  .songListTop{
    font-size: 15px;
    padding: 5px;
    background-color: #f5f6f9;
    /*color: #fefefe;*/
    /*border-top: 1px #313131 solid;*/
  }
  .picImage{
    background-size: cover;
    width: 30px;
    height: 30px;
    display: inline-block;
  }
</style>
